import React, { Component } from "react";

import FilterFooter from "../../../../components/FilterFooter";

import styles from './index.module.css'

export default class FilterMore extends Component {
  state = {
    moreSelectedValues: this.props.selectedValues['more']
  }

  clickFn = (value) => {
    const { moreSelectedValues } = this.state
    if (moreSelectedValues.includes(value)) {
      let id = moreSelectedValues.indexOf(value)
      moreSelectedValues.splice(id, 1)
    } else {
      moreSelectedValues.push(value)
    }
    this.setState({
      moreSelectedValues
    })
  }

  onClear = (type) => {
    this.setState({
      moreSelectedValues: []
    })
  }

  renderItem(type, label) {
    return (
      <div className={styles.item} key={label}>
        <h3 className={styles.h3}>{label}</h3>
        {
          type.map(item => {
            return (
              <div key={item.value} className={[styles.button, this.state.moreSelectedValues.includes(item.value) ? styles.choose : ''].join(' ')} onClick={() => this.clickFn(item.value)}>{item.label}</div>
            )
          })
        }
      </div>
    )
  }
  
  render() {
    const { type, onSave, characteristic, floor, oriented, roomType } = this.props
    const { moreSelectedValues } = this.state
    let list = [[floor, '楼层'], [oriented, '朝向'], [roomType, '户型'], [characteristic, '房屋亮点']]
    return (
      <div className={styles.filterMore}>
        {
          list.map((item) => {
            return this.renderItem(item[0], item[1])
          })
        }
        <FilterFooter ok="确定" cancel="清空" onCancel={() => this.onClear(type)} onSave={() => onSave(type, moreSelectedValues)}></FilterFooter>
      </div>
    )
  }
}